<template>
  <div class="container h-p100">
    <div class="box box-ver h-p100">
      <div class="box-f1 of-y-s">
        <div class="line">
          <div class="title">借款单</div>
          <div class="value">{{bizAccountBill.dailyLoanNum}}</div>
        </div>
        <div class="line box box-ac">
          <div class="box-f1">
            <div class="title">费用类型</div>
            <div class="value">{{bizAccountBill.expenseName}}&nbsp;</div>
          </div>
          <!-- <div class="icon icon-arrow-right"></div> -->
        </div>
        <div class="line">
          <div class="title">还款金额<span class="tc-red">*</span></div>
          <div class="value box box-ac">
            <div class="tc-000">¥&nbsp;</div>
            <input v-limit-money="{max: bizAccountBill.amountBalance}" v-model="bizAccountBill.amount" class="box-f1" type="number">
            <div class="icon-edit icon"></div>
          </div>
        </div>
        <div class="line">
          <div class="title box box-ac">
            <div class="box-f1">说明<span class="tc-red">*</span></div>
            <div class="icon-edit icon"></div>
          </div>
          <div class="vulue box">
            <textarea v-model="bizAccountBill.cause" placeholder="请填写还款说明" class="box box-f1" name=""></textarea>
          </div>
        </div>
      </div>
      <div @click="next()" class="btn-bot">第三步 确认还款信息</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'huankuanStep2',
  computed: {
    ...mapState(['userNum', 'bizAccountBill'])
  },
  data () {
    return {
    }
  },
  mounted () {
    this.getDailyLoanBillDetails()
  },
  methods: {
    /* 获取借款单详情 */
    getDailyLoanBillDetails () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getDailyLoanBillDetails',
          billNum: this.bizAccountBill.dailyLoanNum
        }
      }).then(res => {
        if (res.code === 200) {
          this.$store.commit('bizAccountBill', {
            expenseNum: res.typeNum,
            expenseName: res.typeName
          })
        }
      })
    },
    next () {
      if (!this.bizAccountBill.amount) {
        this.$tools.openToast({
          msg: '请填写还款金额',
          duration: 2000
        })
        return
      }
      if (!this.bizAccountBill.cause) {
        this.$tools.openToast({
          msg: '请填写还款说明',
          duration: 2000
        })
        return
      }
      this.$router.push('/huankuanStep3')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.line{
  padding:.3rem;
  background-color:#FFF;
  border-bottom:1px solid #ddd;
  &:nth-of-type(1) {
    margin-top:.35rem;
  }
  .title{
    font-size:.3rem;
  }
  .value{
    margin-top:.15rem;
    color:#888;
    font-size:.36rem;
  }
  textarea{
    margin-top:.25rem;
    padding:.15rem;
    border:1px solid #666;
    border-radius:.15rem;
    font-size:.3rem;
    height:1.8rem;
    margin-bottom:.25rem;
  }
}
.btn-bot{
  @include btn(100%, 1rem, .36rem);
}
</style>
